<template>
  <div class="content bg-red flex-col-center">
    <div class="main flex-col-center">
      <div class="fs-150">404</div>
      <div class="fs-30">NOT FOUND</div>
      <button @click="router.go(-2)" class="margin-col-10" >返回上一页</button>
    </div>
  </div>
</template>

<script setup lang="ts">

import router from "@/router";
</script>

<style scoped lang="less">

.content{
  width: 100%;
  height:97vh;
  background: url("@/assets/image/404/body.jpg") no-repeat transparent center;
  .main{
    //color: #
    color: var(--theme-color-2);
    height: 50vh;
    .fs-150{
      font-size: 150px;
    }
    .fs-30{
      font-size: 30px;
    }
    button{
      width: 200px;
      height: 50px;
      border-radius: 50px;
      border: 1px solid transparent;
      font-size: 20px;
      color: whitesmoke;
      background-color: var(--theme-color-2);
      cursor: pointer;
      transition: all 0.3s;
      &:hover{
        opacity: 0.9;
      }
    }
  }
}

</style>